<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>天蓝简洁模板-JPress模板</title>

    <link rel="stylesheet" href="/static/components/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bl-css.css">

    <!--[if lt IE 9]>
    <script src="/static/components/html5shiv/html5shiv.min.js"></script>
    <script src="/static/components/respond/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="bl-header container-fluid">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-dark bl-nav">
                <a class="nav-prand" href="bl-first-index.html">JPress</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a href="bl-first-index.html">首页 <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a href="bl-aritical-list.html">文章</a>
                        </li>
                        <li class="nav-item">
                            <a href="bl-course-list.html">教程</a>
                        </li>
                        <li class="nav-item">
                            <a href="bl-about.html">关于</a>
                        </li>
                    </ul>
                </div>
                <form class="form-inline my-2 my-lg-0">
                    <button class="btn btn-outline-light my-2 my-sm-0 bl-light-color" type="submit"><i class="fa fa-search"></i></button>
                </form>
                <button type="button" class="btn btn-outline-light bl-light-color">下载</button>
            </nav>
        </div>
    </div>

    <div class="bl-bgclor container-fluid">
        <div class="bl-banner container">
            <img src="img/banner.jpg" class="img-fluid" alt="Responsive image">
        </div>
    </div>

    <div class="container bl-card">
        <h3 class="bl-card-title">我们的优势</h3>
        <div class=" card-group bl-card-body">
            <div class="card card-body-item">
                <div class="item-icon">
                    <i class="fa fa-paper-plane-o fa-4x align-middle" aria-hidden="true"></i>
                </div>
                <div class="card-body item-body item-body">
                    <h3 class="card-title">轻</h3>
                    <p class="card-text"><small class="text-muted">轻到只有8张数据表，却能实现WordPress的几乎所有功能</small></p>
                </div>
            </div>

            <div class="card card-body-item">
                <div class="item-icon">
                    <i class="fa fa-heart-o fa-4x align-middle" aria-hidden="true"></i>
                </div>
                <div class="card-body item-body item-body">
                    <h3 class="card-title">快</h3>
                    <p class="card-text"><small class="text-muted">无论多么复杂的页面，JPress响应几乎在10毫秒内</small></p>
                </div>
            </div>

            <div class="card card-body-item">
                <div class="item-icon">
                    <i class="fa fa-dribbble fa-4x align-middle" aria-hidden="true"></i>
                </div>
                <div class="card-body item-body item-body">
                    <h3 class="card-title">灵活</h3>
                    <p class="card-text"><small class="text-muted">JPress提出的“模板即模型”的概念，几乎可以用来做任何类型的网站。</small></p>
                </div>
            </div>

            <div class="card card-body-item">
                <div class="item-icon">
                    <i class="fa fa-hand-rock-o fa-4x align-middle" aria-hidden="true"></i>
                </div>
                <div class="card-body item-body item-body">
                    <h3 class="card-title">国产</h3>
                    <p class="card-text"><small class="text-muted">JPress天生融合了微信公众号，更符合国人需求。</small></p>
                </div>
            </div>
        </div>
    </div>
    <div class="container bl-card">
        <h3 class="bl-card-title">产品介绍</h3>
        <div class="row product-box-body">
            <div class="col-md-6 col-sm-12 product-box-image">
                <img class="card-img-left" src="img/product1.jpg" alt="Card image cap" />
            </div>
            <div class="col-md-6 col-sm-12 product-box-content">
                <h3 class="card-title">轻</h3>
                <p class="card-text">轻到只有8张数据表，却能实现WordPress的几乎所有功能</p>
            </div>
        </div>

        <div class="row product-box-body">
            <div class="col-md-6 col-sm-12  product-box-content">
                <h3 class="card-title">轻</h3>
                <p class="card-text">轻到只有8张数据表，却能实现WordPress的几乎所有功能</p>
            </div>
            <div class="col-md-6 col-sm-12 product-box-image">
                <img class="card-img-left" src="img/product-example.jpg" alt="Card image cap" />
            </div>
        </div>

        <div class="row product-box-body">
            <div class="col-md-6 col-sm-12 product-box-image">
                <img class="card-img-left" src="img/product-example.jpg" alt="Card image cap" />
            </div>
            <div class="col-md-6 col-sm-12 product-box-content">
                <h3 class="card-title">轻</h3>
                <p class="card-text">轻到只有8张数据表，却能实现WordPress的几乎所有功能</p>
            </div>
        </div>

        <div class="row product-box-body">
            <div class="col-md-6 col-sm-12  product-box-content">
                <h3 class="card-title">轻</h3>
                <p class="card-text">轻到只有8张数据表，却能实现WordPress的几乎所有功能</p>
            </div>
            <div class="col-md-6 col-sm-12 product-box-image">
                <img class="card-img-left" src="img/product-example.jpg" alt="Card image cap" />
            </div>
        </div>

        <div class="row product-box-body">
            <div class="col-md-6 col-sm-12 product-box-image">
                <img class="card-img-left" src="img/product-example.jpg" alt="Card image cap" />
            </div>
            <div class="col-md-6 col-sm-12 product-box-content">
                <h3 class="card-title">轻</h3>
                <p class="card-text">轻到只有8张数据表，却能实现WordPress的几乎所有功能</p>
            </div>
        </div>

        <div class="row product-box-body">
            <div class="col-md-6 col-sm-12  product-box-content">
                <h3 class="card-title">轻</h3>
                <p class="card-text">轻到只有8张数据表，却能实现WordPress的几乎所有功能</p>
            </div>
            <div class="col-md-6 col-sm-12 product-box-image">
                <img class="card-img-left" src="img/product-example.jpg" alt="Card image cap" />
            </div>
        </div>

    </div>
    <div class="container bl-card">
        <h3 class="bl-card-title">我们的团队</h3>
        <div class="card-deck text-center">
            <div class="card">
                <img class="card-img-top" src="img/photo-example.jpg" alt="">
                <div class="card-body">
                    <h3 class="card-title">Michael</h3>
                    <p class="card-text"><small class="text-muted">JPress开源作者</small></p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="img/photo-example.jpg" alt="Card image cap">
                <div class="card-body">
                    <h3 class="card-title">Jean</h3>
                    <p class="card-text"><small class="text-muted">UI设计师，插画师</small></p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="img/photo-example.jpg" alt="Card image cap">
                <div class="card-body">
                    <h3 class="card-title">tony</h3>
                    <p class="card-text"><small class="text-muted">JPress产品经理</small></p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="img/photo-example.jpg" alt="Card image cap">
                <div class="card-body">
                    <h3 class="card-title">Jeey</h3>
                    <p class="card-text"><small class="text-muted">JPress运营总监</small></p>
                </div>
            </div>
        </div>
    </div>
    <div class="container bl-card">
        <h3 class="bl-card-title">客户见证</h3>
        <div class="card-deck">
            <div class="card">
                <div class="card-body">
                    "这是我用过的最好的建站工具，没有之一。"
                </div>
                <div class="card-body">
                    <h3 class="card-title">小四</h3>
                    <p class="card-text"><small class="text-muted">著名作家</small></p>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    "这是我用过的最好的建站工具，没有之一。"
                </div>
                <div class="card-body">
                    <h3 class="card-title">红薯</h3>
                    <p class="card-text"><small class="text-muted">非知名排版家</small></p>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    "这是我用过的最好的建站工具，没有之一。"
                </div>
                <div class="card-body">
                    <h3 class="card-title">jsy</h3>
                    <p class="card-text"><small class="text-muted">上市公司产品经理</small></p>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    "这是我用过的最好的建站工具，没有之一。"
                </div>
                <div class="card-body">
                    <h3 class="card-title">Jeey</h3>
                    <p class="card-text"><small class="text-muted">上市公司运营总监</small></p>
                </div>
            </div>
        </div>
    </div>
    <div class="bl-footer container-fluid">
        <div class="container">
            <ul class="bl-footer-list">
                <li class="bl-footer-item">
                    <a href="#">帮助</a>
                </li>
                <li class="bl-footer-item">
                    <a href="#">隐私</a>
                </li>
                <li class="bl-footer-item">
                    <a href="#">条款</a>
                </li>
            </ul>
            <div class="copyright">copyright @ 2018 JPress设计部出品</div>
        </div>
    </div>
<script src="/static/components/jquery/jquery.min.js"></script>
<script src="/static/components/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>